<template>
	<div class="hot-swiper" @click="navigateTo" v-if="hotList['length']">
		<div class="hot-swiper-left">
			<image :src="$surl('/hot/hot.png')" mode="widthFix"></image>
		</div>
		<div class="hot-swiper-right">
			<swiper class="swiper" circular autoplay :interval="3000" vertical>
				<swiper-item v-for="(item, index) in hotList" :key="index">
					<view class="swiper-item">
						<text class="uv-line-1">{{ item['title'] }}</text>
					</view>
				</swiper-item>
			</swiper>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import articles from '@/api/articles/index.js'

const hotList = ref([])

async function initData() {
	const response = await articles.hotList({ page: 1, limit: 10 });
	if (response['code'] == 200) {
		hotList.value = response['data'];
	}
}

function navigateTo() {
	uni.navigateTo({
		url: '/pages/sub/main/hotList/index'
	})
}

initData()
</script>

<style lang="scss" scoped>
.hot-swiper {
	display: flex;
	align-items: center;
	background: $uv-bg-color;
	border-radius: 11px;
	margin-top: 20rpx;

	.hot-swiper-left {
		flex-shrink: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 79rpx;
		width: 118rpx;
		border-radius: 11px;
		background: linear-gradient(90deg, #ffefee, #ffc8c4);

		image {
			height: 26rpx;
			width: 98rpx;
		}
	}

	.hot-swiper-right {
		flex: 1;
		height: 80rpx;
		padding: 0 16rpx;

		.swiper {
			height: 80rpx;

			.swiper-item {
				height: 80rpx;
				line-height: 80rpx;
				font-weight: 500;
				font-size: 30rpx;
			}
		}
	}
}
</style>